<template>
  <div class="addVisitor1">
    <div class="add-message">
      <h1>添加就诊人</h1>
      <p>请确保就诊人信息真是准确，一旦创建成功，不允许修改</p>
      <div class="add-message-content">
        <van-form @submit="onSubmit">
          <!-- 输入任意文本 -->
          <van-field v-model="text" label="姓名" required />

          <!-- 证件类型 -->
          <van-cell
            is-link
            title="请选择证件类型"
            @click="show = true"
            :value="card"
            required
          />
          <van-action-sheet
            v-model="show"
            :actions="actions"
            @select="onSelect"
            required
          />

          <!-- 允许输入正整数，调起纯数字键盘 -->
          <van-field v-model="digit" type="digit" label="证件号码" required />

          <!-- 性别 -->
          <van-cell
            is-link
            title="选择性别"
            @click="showGender = true"
            :value="gender"
            required
          />
          <van-action-sheet
            v-model="showGender"
            :actions="actionsGender"
            @select="onSelectGender"
            required
          />

          <!-- 出生日期 -->
          <van-cell
            title="出生日期"
            is-link
            :value="birthdayValue"
            @click="birthdayShow = true"
            required
          />
          <van-action-sheet v-model="birthdayShow" title="标题">
            <div class="content">
              <van-datetime-picker
                v-model="birthday"
                type="date"
                title="选择年月日"
                v-show="birthday"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConfirm"
                @cancel="onCancel"
              />
            </div>
          </van-action-sheet>

          <!-- 输入手机号，调起手机号键盘 -->
          <van-field v-model="tel" type="tel" label="手机号" required />
          <!-- 输入密码 -->
          <van-field v-model="password" type="password" label="密码" required />

          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="$router.push('/addVisitor2')"
            >下一步
          </van-button>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddVisitor1",

  data() {
    return {
      text: "",
      digit: "",
      tel: "",
      password: "",
      // 选择证件类型
      show: false,
      actions: [{ name: "居民身份证" }, { name: "护照" }, { name: "军官证" }],
      card: "居民身份证",
      // 选择性别
      showGender: false,
      actionsGender: [{ name: "男" }, { name: "女" }],
      gender: "性别",
      // 出生日期
      birthdayShow: false,
      birthday: new Date(),
      birthdayValue: "请选择出生日期",
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2050, 10, 1),
    };
  },

  mounted() {},

  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      this.$toast(item.name);
      this.card = item.name;
    },
    onSelectGender(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.showGender = false;
      this.$toast(item.name);
      this.gender = item.name;
    },

    // 获取出生日期
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      console.log(this.formatDate(date));
      this.birthdayValue = this.formatDate(date);
      this.birthdayShow = false;
    },
    onCancel() {
      this.birthdayShow = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.add-message {
  width: 90%;
  margin: 100% auto;

  h1 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
  }

  > p {
    font-size: 14px;
    text-align: center;
    margin: 30px auto;
    color: #e8be78;
  }

  .add-message-content {
    .van-form {
      .van-cell {
        border-bottom: 2px solid #b4b4b4;
      }
    }
  }

  button {
    margin-top: 30px;
  }

  .content {
    padding: 16px 16px 160px;
  }
}
</style>